<template>
  <div class="">
    <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="推广目的" name="productType">
        <a-radio-group v-model:value="formState.productType">
          <a-radio-button :value="2">应用下载</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="版位选择" name="displayType">
        <a-radio-group v-model:value="formState.displayType">
          <a-radio-button :value="34">商店-富媒体</a-radio-button>
          <a-radio-button :value="36">非商店-富媒体</a-radio-button>
          <a-radio-button :value="37">米盟-富媒体</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="计划名称" name="name">
        <CampaignName v-model:name="formState.name" v-model:auto_suffix_id="formState.auto_suffix_id" :maxLength="10" />
      </a-form-item>

      <a-form-item label="推广时段" name="deliveryTimeFlag">
        <a-radio-group v-model:value="formState.deliveryTimeFlag">
          <a-radio-button :value="false">不限</a-radio-button>
          <a-radio-button :value="true">指定</a-radio-button>
        </a-radio-group>
        <a-form-item-rest name="deliveryTime" v-if="formState.deliveryTimeFlag">
          <div style="width: 710px; padding-top: 10px">
            <TimeSelect v-model="formState.deliveryTime" :halfHourMode="true" ref="hoursRef" />
          </div>
        </a-form-item-rest>
      </a-form-item>

      <a-form-item label="自定义人群" name="userPackageFlag">
        <a-radio-group v-model:value="formState.userPackageFlag">
          <a-radio-button :value="false">不限</a-radio-button>
          <a-radio-button :value="true">自定义人群</a-radio-button>
          <a-form-item-rest name="deliveryTime" v-if="formState.userPackageFlag">
            <div style="padding-top: 10px">
              <a-button type="primary" @click="setCrowd">设置自定义人群</a-button>
            </div>
          </a-form-item-rest>
        </a-radio-group>
        <div style="padding-top: 10px" v-if="formState.userPackageFlag && num">{{ num }}个账户已设置</div>
      </a-form-item>

      <a-form-item label="出价类型" name="billingType">
        <a-radio-group v-model:value="formState.billingType">
          <a-radio-button :value="2" v-if="formState.displayType === 36 || formState.displayType === 37">CPC</a-radio-button>
          <a-radio-button :value="3" v-if="formState.displayType === 34">CPD</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="开启状态" name="pause">
        <a-radio-group v-model:value="formState.pause">
          <a-radio-button :value="true">关闭</a-radio-button>
          <a-radio-button :value="false">开启</a-radio-button>
        </a-radio-group>
      </a-form-item>
    </a-form>
    <SelectCrowd ref="selectCrowdRef" :key="crowdKey" @update:hide="hideSetCrowd" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { FormStateCampaign as FormState } from "@/pages/NewBatchCreateAd/adx/xiaomi/enum";

import CampaignName from "@/pages/NewBatchCreateAd/components/common/CampaignName.vue";

import TimeSelect from "@/pages/NewBatchCreateAd/components/common/TimeSelect.vue";

import SelectCrowd from "@/pages/NewBatchCreateAd/adx/xiaomi/campaign/SelectCrowd.vue";
import { batchCreateAdStore } from "@/pages/NewBatchCreateAd/store/batchCreateAdStore";
const store = batchCreateAdStore();

const num = ref(0);

// 监听store.Campaign
watch(
  store.Campaign,
  () => {
    if (store.Campaign.audienceMap) {
      let keys = Object.keys(store.Campaign.audienceMap);
      let count = 0;
      keys.forEach((key) => {
        if (store.Campaign.audienceMap[key].include.length > 0 || store.Campaign.audienceMap[key].exclude.length > 0) {
          count++;
        }
      });
      num.value = count;
    }
  },
  {
    deep: true,
  }
);



const rules = {
  name: [
    {
      required: true,
      message: "",
    },
  ],
  productType: [
    {
      required: true,
      message: "请选择推广目的",
    },
  ],
  displayType: [
    {
      required: true,
      message: "请选择版位",
    },
  ],
  deliveryTimeFlag: [
    {
      required: true,
      message: "请选择推广时段",
    },
  ],
  pause: [
    {
      required: true,
      message: "请选择开启状态",
    },
  ],
  billingType: [
    {
      required: true,
      message: "请选择出价类型",
    },
  ],
};

const formState = reactive<FormState>({
  name: "",
  auto_suffix_id: true,
  productType: 2,
  displayType: 34,
  deliveryTimeFlag: false,
  deliveryTime: [0, 0, 0, 0, 0, 0, 0],
  userPackageFlag: false,
  pause: false,
  billingType: 3,
});

const hoursRef = ref(null);
const selectCrowdRef = ref();

const setCrowd = () => {
  selectCrowdRef.value.show();
};

// 更新人群选择组件的key
const crowdKey = ref(0);
const hideSetCrowd = () => {
  crowdKey.value++;
};

// 监听版位
watch(
  () => formState.displayType,
  () => {
    formState.billingType = formState.displayType === 36 || formState.displayType === 37 ? 2 : 3;
  }
);
</script>

<style scoped lang="less">
.dynamic-packet {
  background-color: #f0f0f0;
  padding: 5px 15px;
  margin-top: 10px;
}
.dynamic-packet span {
  cursor: pointer;
  color: #1890ff;
}
</style>
